<template>
	<z-paging ref="paging">
		<view class="p-2 font">
			<u--form
				ref="formRef"
				labelPosition="bottom"
				:labelWidth="90"
				:model="formState"
				:rules="rules"
			>
				<u-form-item
					label="姓名"
					borderBottom
					prop="name"
				>
					<u--input
						v-model="formState.name"
						fontSize="14"
						border="none"
						placeholder="请填写姓名"
					></u--input>
				</u-form-item>
				<u-form-item
					label="联系电话"
					borderBottom
					prop="phone"
				>
					<u--input
						v-model="formState.phone"
						fontSize="14"
						border="none"
						placeholder="请填写联系电话"
					></u--input>
				</u-form-item>
				<u-form-item
					label="邮箱地址"
					borderBottom="none"
					prop="email"
				>
					<u--input
						v-model="formState.email"
						border="none"
						fontSize="14"
						placeholder="请选择邮箱地址"
					></u--input>
				</u-form-item>
				<u-form-item
					label="公司名称"
					borderBottom
				>
					<u--input
						v-model="formState.company"
						border="none"
						fontSize="14"
						placeholder="请选择公司名称"
					></u--input>
				</u-form-item>
				<u-form-item
					label="公司地址"
					borderBottom
				>
					<view class="flex flex-1 flex-column">
						<view class="flex justify-between" @click="showLocal = true">
							<view v-if="formState.city" class="color-main font">
								{{ formState.city }}
							</view>
							<view v-else class="color-tips font">
								请选择城市
							</view>
							<u-icon
								name="arrow-right"
							></u-icon>
						</view>
						<view v-if="formState.city" class="mt">
							<u--input
								v-model="formState.addr"
								fontSize="14"
								border="none"
								placeholder="请填写详细地址"
							></u--input>
						</view>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view slot="bottom" class="safe-area-inset-bottom shadow-3">
			<view class="p-2">
				<u-button type="primary" shape="circle" text="提交" @click="confirmHandle"></u-button>
			</view>
		</view>
		<u-picker @cancel="showLocal = false" @close="showLocal = false" :show="showLocal" :columns="addressColumns"
			@confirm="localConfirm" title="请选择所在地" keyName="name" itemHeight="80" closeOnClickOverlay ref="uPicker"
			@change="changeHandler" immediateChange></u-picker>
	</z-paging>
</template>

<script>
	import areas from '@/common/areas.json'
	import { local } from '@/common/local.js'
	import { updUserInfo } from '@/api/index.js'
	export default {
		data() {
			return {
				showLocal: false,
				addressColumns: [],
				formState: {
					name: '',
					phone: '',
					city: '',
					location: '',
					company: '',
					email: ''
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur']
					},
					phone: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码格式不正确',
							trigger: ['blur'],
						}
					]
				}
				
			};
		},
		onShow() {
			//省的数组
			const provinceData = areas.map(e => {
				return {
					name: e.name,
					code: e.code
				} //这里可以直接return e.name  这里我是要用到code所以才用对象包起来的 下面的市 区 也一样
			})
			//市的数组
			const cityData = areas.map(e => {
				const arr = []
				arr.push(
					e.areas.map(c => {
						return {
							name: c.name,
							code: c.code
						}
		
					})
				)
				return arr
			})
			//区的数组
			const areaData = areas.map(e => {
				const arr = []
				arr.push(
					e.areas.map(c =>
						c.areas.map(d => {
							return {
								name: d.name,
								code: d.code
							}
						})
					)
				)
				return arr
			})
			const arr = [provinceData, cityData[0][0], areaData[0][0][0]]
			this.addressColumns = arr
		},
		methods: {
			confirmHandle() {
				this.$refs.formRef.validate().then(res => {
					if (res) {
						if (this.formState.email && !uni.$u.test.email(this.formState.email)) {
							uni.$u.toast('邮箱格式不正确')
						}
						const params = {
							open_id: local.get('user').openId || 'ocI8h7WTOdZqdqEF2OjiheKvLJm5',
							name: this.formState.name,
							phone: this.formState.phone,
							company: this.formState.company,
							email: this.formState.email,
							location: this.formState.city + this.formState.location,
						}
						let pages = getCurrentPages()
						let prevPage = pages[pages.length - 2] 
						// console.error(params)
						updUserInfo(params).then(res => {
							uni.$u.toast('提交成功')
							setTimeout(() => {
								// uni.navigateBack()
								uni.navigateBack({
								  delta: 1,
								  success: () => {
								    prevPage.$vm.checkUser()
									}
								})
							}, 2000)
						})
					}
				})
			},
			
			changeHandler(e) {
				//分别表示选中的列 , 该列的第几个,选中的3列的第几个的数组,组件本身
				const {
					columnIndex,
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				//如果改变的是第一列
				if (columnIndex === 0) {
					const children1 = this.addressData[index].areas.map(e => {
						return {
							name: e.name,
							code: e.code
						}
					})
					picker.setColumnValues(1, children1)
					//更换 第二列数据
					const children2 = this.addressData[index].areas[indexs[1]].areas.map(e => {
						return {
							name: e.name,
							code: e.code
						}
					})
					picker.setColumnValues(2, children2)
					//更换 第三列数据
				}
				if (columnIndex === 1) {
					//如果改变的是第二列
					const children3 = this.addressData[indexs[0]].areas[indexs[1]].areas.map(e => {
						return {
							name: e.name,
							code: e.code
						}
					})
					picker.setColumnValues(2, children3)
					//更换 第三列数据
				}
			},
			localConfirm(e) {
				const local = ''
				console.error(local)
				this.formState.city = `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
				// this.formState.city = `${e.value[0].code},${e.value[1].code},${e.value[2].code}`
				this.showLocal = false
			},
		}
		
	}
</script>

<style lang="scss">

</style>
